/*<form name="form_upload" action="/admin/upload.html" enctype="multipart/form-data" method="post">
	<input type="hidden" name="name" value="img" />
    <input type="hidden" name="file" value="banner" />
	<input type="file" name="img" id="form_upload_files" />
</form>*/

! function(win) {
	var FormCombox = function() {}

	FormCombox.prototype.list = [];
	FormCombox.prototype.pusharr = function(opt, sort) {
		var that = this;
		if(sort) {
			if(that.list[sort]) {
				that.list.splice(sort, 0, opt);
			} else {
				that.list[sort] = opt;
			}
		} else {
			that.list.push(opt);
		}
	};

	FormCombox.prototype.addCombox = function(arrs) {
		if(arrs.length <= 0) return;
		var that = this;
		for(var i in arrs) {
			var opt = arrs[i];
			if(typeof opt.type == 'string') {
				that.createCombox(opt);
			} else {
				continue;
			}
		}
	}

	FormCombox.prototype.createCombox = function(opts) {
		var that = this;
		if(opts.type == 'hidden') {
			var input = that.tool.create('input');
			input.type = 'hidden';
			input.name = opts.name;
			input.value = opts.value;
			that.pusharr(input, opts.sort);
		} else {
			var _div = that.tool.create('div');
			_div.className = 'layout-combox';
			var label = that.tool.create('label');
			label.className = 'layout-form-label';
			label.innerText = opts.label;
			var _ipt = that.tool.create('div');
			_ipt.className = 'layout-form-ipt';
			if(opts.type == 'input' || opts.type == 'text' || opts.type == 'password' || opts.type == 'textarea') {
				var _com;
				if(opts.type == 'textarea') {
					_com = that.tool.create('textarea');
				} else {
					_com = that.tool.create('input');
					_com.type = (opts.type == 'input' ? 'text' : opts.type);
				}
				typeof opts.name != 'undefined' ? _com.name = opts.name : null;
				typeof opts.id != 'undefined' ? _com.id = opts.id : null;
				typeof opts.value != 'undefined' ? _com.value = opts.value : null;
				typeof opts.placeholder != 'undefined' ? _com.placeholder = opts.placeholder : null;
				if(typeof opts.attr != 'undefined') {
					for(var a_i in opts.attr) {
						_com.setAttribute(a_i, opts.attr[a_i]);
					}
				}
				_ipt.appendChild(_com);
			} else if(opts.type == 'checkbox') {

			} else if(opts.type == 'radio') {
				if(opts.radio.length >= 1) {
					var div = that.tool.create('div');
					div.className = 'layout-form-radio';
					typeof opts.disabled != 'undefined' && opts.disabled == 'disabled' ? div.setAttribute('disabled', 'disabled') : null;
					var input = that.tool.create('input');
					input.type = 'hidden';
					input.name = opts.name;
					div.appendChild(input);
					var radio = opts.radio;
					for(var i in radio) {
						var span = that.tool.create('span');
						var a = that.tool.create('a');
						a.href = 'javascript:;';
						a.setAttribute('data-value', radio[i]['value']);
						if(typeof opts.disabled == 'undefined' && opts.disabled != 'disabled') {
							a.onclick = function(e) {
								that.tool.stopPropagation(e);
								var jude = this.getAttribute('checked');
								if(!jude) {
									var sibling = this.parentNode.parentNode.getElementsByTagName('a');
									for(var _ain = 0; _ain < sibling.length; _ain++) {
										sibling[_ain].removeAttribute('checked');
										sibling[_ain].childNodes[0].className = 'icon-unselected';
									}
									this.setAttribute('checked', 'checked');
									this.childNodes[0].className = 'icon-selected';
									this.parentNode.parentNode.childNodes[0].value = this.getAttribute('data-value');
								}
							}
						}
						var _i = that.tool.create('i');
						if(typeof radio[i]['checked'] != 'undefined' && radio[i]['checked'] == 'checked') {
							a.setAttribute('checked', 'checked');
							_i.className = 'icon-selected';
							input.value = radio[i]['value'];
						} else {
							_i.className = 'icon-unselected';
						}
						var font = that.tool.create('font');
						font.innerText = radio[i]['text'];
						a.appendChild(_i);
						span.appendChild(a);
						span.appendChild(font);
						div.appendChild(span);
					}
					_ipt.appendChild(div);
				}
			} else if(opts.type == 'select') {
				var select = that.tool.create('div');
				select.className = 'layout-form-select';
				if(typeof opts.disabled == 'undefined' && opts.disabled != 'disabled') {
					select.onclick = function(e) {
						that.tool.stopPropagation(e);
						var _self = this,
							selected = _self.getAttribute('layout-selected'),
							_ul = _self.childNodes[1];
						if(selected == 'on') {
							_self.setAttribute('layout-selected', 'off');
							_ul.style.display = 'none';
						} else {
							_self.setAttribute('layout-selected', 'on');
							_ul.style.display = 'block';
						}
					}
				} else {
					select.setAttribute('disabled', 'disabled');
				}
				var _title = that.tool.create('div');
				_title.className = 'layout-select-title';
				var _input = that.tool.create('input');
				_input.type = 'hidden';
				_input.name = opts.name;
				(typeof opts.value == 'string') && (_input.value = opts.value);
				var _p = that.tool.create('p');
				(typeof opts.text == 'string') && (_p.innerText = opts.text);
				(typeof opts.html == 'string') && (_p.innerHTML = opts.html);
				var ul = that.tool.create('ul');
				ul.className = 'layout-select-container';
				var option = opts.option;
				if(option.length >= 1) {
					for(var i in option) {
						var li = that.tool.create('li');
						li.setAttribute('data-value', option[i]['value']);
						(typeof option[i]['text'] == 'string') && (li.innerText = option[i]['text']);
						(typeof option[i]['html'] == 'string') && (li.innerHTML = option[i]['html']);
						li.onclick = function(e) {
							that.tool.stopPropagation(e);
							var _self = this,
								parent = _self.parentNode,
								prev = parent.previousSibling,
								_input = prev.childNodes[0],
								_p = prev.childNodes[1];
							_input.value = _self.getAttribute('data-value');
							(typeof option[i]['text'] == 'string') && (_p.innerText = _self.innerText);
							(typeof option[i]['html'] == 'string') && (_p.innerHTML = _self.innerHTML);
							parent.parentNode.click();
						}
						ul.appendChild(li);
						if(option[i]['selected']) {
							_input.value = option[i]['value'];
							(typeof option[i]['text'] == 'string') && (_p.innerText = option[i]['text']);
							(typeof option[i]['html'] == 'string') && (_p.innerHTML = option[i]['html']);
						}
					}
				}
				_title.appendChild(_input);
				_title.appendChild(_p);
				select.appendChild(_title);
				select.appendChild(ul);
				_ipt.appendChild(select);
			} else if(opts.type == 'file') {
				var _upload_form = that.tool.create('form');
				_upload_form.action = opts.url;
				_upload_form.enctype = 'multipart/form-data';
				_upload_form.method = 'post';
				if(typeof opts.param == 'object') {
					for(var i in opts.param) {
						var param = opts.param[i];
						var _h = that.tool.create('input');
						_h.type = 'hidden';
						_h.name = i;
						_h.value = param;
						_upload_form.appendChild(_h);
					}
					var _file = that.tool.create('input');
					_file.type = 'file';
					_file.name = 'file';
					_file.onchange = function(e) {
						that.tool.stopPropagation(e);
						if(typeof opts.callback == 'string') {
							eval(opts.callback)(_upload_form);
						}
					};
					_upload_form.appendChild(_file);
				}
				var _upload = that.tool.create('div');
				_upload.className = 'layout-form-upload';
				var _a = that.tool.create('a');
				_a.href = 'javascript:;';
				_a.onclick = function(e) {
					that.tool.stopPropagation(e);
					_file.click();
				};
				var _i = that.tool.create('i');
				_i.className = 'icon-upload';
				var _font = that.tool.create('font');
				_font.innerText = opts.text;
				var _status = that.tool.create('span');
				_status.className = 'layout-upload-status';
				_status.setAttribute('upload-status', 'wait');
				var _s_i = that.tool.create('i');
				_s_i.className = 'icon-refresh';
				_status.appendChild(_s_i);
				_a.appendChild(_i);
				_a.appendChild(_font);
				_upload.appendChild(_a);
				_upload.appendChild(_status);
				_ipt.appendChild(_upload);
			} else if (opts.type == 'switch') {
				/*var _com;
				if(opts.type == 'textarea') {
					_com = that.tool.create('textarea');
				} else {
					_com = that.tool.create('input');
					_com.type = (opts.type == 'input' ? 'text' : opts.type);
				}
				typeof opts.name != 'undefined' ? _com.name = opts.name : null;
				typeof opts.id != 'undefined' ? _com.id = opts.id : null;
				typeof opts.value != 'undefined' ? _com.value = opts.value : null;
				typeof opts.placeholder != 'undefined' ? _com.placeholder = opts.placeholder : null;
				if(typeof opts.attr != 'undefined') {
					for(var a_i in opts.attr) {
						_com.setAttribute(a_i, opts.attr[a_i]);
					}
				}
				_ipt.appendChild(_com);*/
				
				/*<div class="layout-form-switch">
					<a href="javascript:;"></a>
				</div>*/
				
				
				var _switch = that.tool.create('div');
				_switch.className = 'layout-form-switch';
				
				var a = that.tool.create('a');
				a.href = 'javascript:;';
				
				var _input = that.tool.create('input');
				_input.type = 'hidden';
				_input.name = opts.name;
				
				a.onclick = function(e) {
					that.tool.stopPropagation(e);
					var isChecked = this.getAttribute('checked');
					if (isChecked) {
						this.setAttribute('checked', 'checked');
						
					} else {
						this.removeAttribute('checked');
					}
				}
				
				
				
			} else if(opts.type == 'custom') {
				_ipt.innerHTML = opts.html;
			}
			_div.appendChild(label);
			_div.appendChild(_ipt);
			that.pusharr(_div, opts.sort);
		}
	}

	FormCombox.prototype.creates = {
		'fileCombox': function() {
			var _upload_form = that.tool.create('form');
			_upload_form.action = opts.url;
			_upload_form.enctype = 'multipart/form-data';
			_upload_form.method = 'post';
			if(typeof opts.param == 'object') {
				for(var i in opts.param) {
					var param = opts.param[i];
					var _h = that.tool.create('input');
					_h.type = 'hidden';
					_h.name = i;
					_h.value = param;
					_upload_form.appendChild(_h);
				}
				var _file = that.tool.create('input');
				_file.type = 'file';
				_file.name = 'file';
				_file.onchange = function(e) {
					that.tool.stopPropagation(e);
					if(typeof opts.callback == 'string') {
						eval(opts.callback)(_upload_form);
					}
				};
				_upload_form.appendChild(_file);
			}
			var _upload = that.tool.create('div');
			_upload.className = 'layout-form-upload';
			var _a = that.tool.create('a');
			_a.href = 'javascript:;';
			_a.onclick = function(e) {
				that.tool.stopPropagation(e);
				_file.click();
			};
			var _i = that.tool.create('i');
			_i.className = 'icon-upload';
			var _font = that.tool.create('font');
			_font.innerText = opts.text;
			var _status = that.tool.create('span');
			_status.className = 'layout-upload-status';
			_status.setAttribute('upload-status', 'wait');
			var _s_i = that.tool.create('i');
			_s_i.className = 'icon-refresh';
			_status.appendChild(_s_i);
			_a.appendChild(_i);
			_a.appendChild(_font);
			_upload.appendChild(_a);
			_upload.appendChild(_status);
			return _upload;
			//_ipt.appendChild(_upload);
		}
	}

	FormCombox.prototype.tool = {
		create: function(name) {
			return document.createElement(name);
		},
		stopPropagation: function(e) {
			e = e || window.event;
			if(e.stopPropagation) {
				e.stopPropagation();
			} else {
				e.cancelBubble = true;
			}
		}
	};

	FormCombox.prototype.reader = function(id) {
		var elem = document.getElementById(id);
		if(elem) {
			var list = this.list;
			for(var i in list) {
				elem.appendChild(list[i]);
			}
			this.list = [];
		}
	};

	FormCombox.prototype.autoInit = function(id) {
		var elem = document.getElementById(id);
		if(elem) {
			var arrs = autoInitEach(elem);
			if(arrs.length >= 1) {
				for(var i in arrs) {
					autoInitCreate(arrs[i]);
				}
			}
		}
	}

	function autoInitEach(elem) {
		var list = [];
		var nodes = elem.getElementsByTagName('*');
		for(var i = 0; i < nodes.length; i++) {
			if(!nodes[i].tagName) continue;
			var tagName = nodes[i].tagName.toLowerCase();
			if(tagName == 'input' || tagName == 'textarea') {
				list.push(nodes[i]);
			}
		}
		return list;
	}

	function autoInitCreate(elem) {
		var that = FormCombox.prototype;
		if(elem.type == 'checkbox') {
			var parent = elem.parentNode;
			var input = that.tool.create('input');
			input.type = 'hidden';
			input.name = elem.name || '';
			var jude = elem.getAttribute('checked');
			var a = that.tool.create('a');
			a.href = 'javascript:;';
			a.setAttribute('layout-ipt-type', 'checkbox');
			a.setAttribute('layout-ipt-name', elem.name || '');
			a.setAttribute('data-value', elem.value || '');
			for(var i in elem.attributes) {
				if(/^data-/.test(elem.attributes[i].name)) {
					a.setAttribute(elem.attributes[i].name, elem.attributes[i].value);
				}
			}
			var fn = function() {};
			if(elem.getAttribute('layout-event-click')) {
				fn = eval(elem.getAttribute('layout-event-click'));
			}
			a.onclick = function(e) {
				that.tool.stopPropagation(e);
				var _self = this,
					sibling = _self.previousSibling,
					child = _self.childNodes[0],
					jude = _self.getAttribute('checked');
				if(jude) {
					_self.removeAttribute('checked');
					child.className = 'icon-checkbox';
					sibling.value = null;
				} else {
					_self.setAttribute('checked', 'checked');
					child.className = 'icon-checkboxed';
					sibling.value = _self.getAttribute('data-value');
				}
				fn(_self);
			}
			var _i = that.tool.create('i');
			a.appendChild(_i);
			parent.insertBefore(a, elem.nextSibling);
			parent.insertBefore(input, elem.nextSibling);
			parent.removeChild(elem);
			if(jude && jude == 'checked') {
				/*input.value = elem.value || '';
				a.setAttribute('checked', 'checked');
				_i.className = 'icon-checkboxed';*/
				a.click();
			} else {
				_i.className = 'icon-checkbox';
			}
		} else if(elem.type == 'file') {
			var parent = elem.parentNode;
			var input = that.tool.create('input');
			input.type = 'hidden';
			input.name = elem.name || '';

			parent.insertBefore(_upload, elem.nextSibling);
			parent.insertBefore(input, elem.nextSibling);
			parent.removeChild(elem);
		}
	}

	win.FormCombox = FormCombox;
}(window);